<template>
  <div style="margin-top: 10px" class="app-contain">
    <el-row :gutter="50">
      <el-col :span="14">
        <el-table
          v-loading="listLoading"
          :data="tableData"
          fit
          highlight-current-row
          style="width: 100%"
          @row-click="itemSelect"
        >
          <el-table-column
            prop="shortTitle"
            label="题干"
            show-overflow-tooltip
          />
          <el-table-column
            prop="questionType"
            label="题型"
            :formatter="questionTypeFormatter"
            width="70"
          />
          <el-table-column prop="subjectName" label="学科" width="50"/>
          <el-table-column prop="createTime" label="做题时间" width="170"/>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :background="false"
          :page.sync="queryParam.pageIndex"
          :limit.sync="queryParam.pageSize"
          @pagination="search"
          style="margin-top: 20px"
        />
      </el-col>
      <el-col :span="10">
        <el-card class="record-answer-info">
          <el-form>
            <el-form-item>
              <QuestionAnswerShow
                :qType="selectItem.questionType"
                :qLoading="qAnswerLoading"
                :question="selectItem.questionItem"
                :answer="selectItem.answerItem"
              />
            </el-form-item>
          </el-form>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import Pagination from '@/components/Pagination'
import questionAnswerApi from '@/api/questionAnswer'
import QuestionAnswerShow from '../exam/components/QuestionAnswerShow'

export default {
  components: { Pagination, QuestionAnswerShow },
  data () {
    return {
      queryParam: {
        pageIndex: 1,
        pageSize: 10,
      },
      listLoading: false,
      tableData: [],
      total: 0,
      qAnswerLoading: false,
      selectItem: {
        questionType: 0,
        questionItem: null,
        answerItem: null,
      },
    }
  },
  created () {
    this.search()
  },
  methods: {
    async search () {
      this.listLoading = true
      let _this = this
      await questionAnswerApi.pageList(this.queryParam).then((data) => {
        const re = data.response
        _this.tableData = re.list
        _this.total = re.total
        _this.queryParam.pageIndex = re.pageNum
        _this.listLoading = false
        if (re.list.length !== 0) {
          _this.qAnswerShow(re.list[0].id)
        }
      })
    },
    itemSelect (row, column, event) {
      this.qAnswerShow(row.id)
    },
    async qAnswerShow (id) {
      let _this = this
      this.qAnswerLoading = true
      await questionAnswerApi.select(id).then((re) => {
        let response = re.response
        _this.selectItem.questionType = response.questionVM.questionType
        _this.selectItem.questionItem = response.questionVM
        _this.selectItem.answerItem = response.questionAnswerVM
        _this.qAnswerLoading = false
      })
    },
    questionTypeFormatter (row, column, cellValue, index) {
      return this.enumFormat(this.questionTypeEnum, cellValue)
    },
  },
  computed: {
    ...mapGetters('enumItem', ['enumFormat']),
    ...mapState('enumItem', {
      questionTypeEnum: (state) => state.exam.question.typeEnum,
    }),
  },
}
</script>

<style lang="scss" scoped>
</style>
